<template>
  <view class="his-data u-skeleton">
    <view class="table-div">
      <view class="header">
        <view class="u-skeleton-fillet" style="margin-right: 10rpx">
          {{ vuex_babyInfo.name }}
        </view>
        <view class="u-skeleton-fillet" style="flex: 1">
          （{{ year }}-01-01至{{ year }}-12-31记录）
        </view>
      </view>

      <view style="border-radius: 20rpx" class="u-skeleton-fillet">
        <wyb-table
          ref="table"
          width="100%"
          header-bg-color="#07C38F"
          header-ft-color="#FFFFFF"
          first-col-bg-color="#FFFFFF"
          :header-weight="false"
          :show-vert-border="false"
          border-color="#E6E6E6"
          :headers="headers"
          :contents="contents"
          default-col-width="80"
          :font-size="[24]"
          height="auto"
          :min-height="[88, 58]"
          :url-col="urlCol"
          :first-line-fixed="true"
        />
      </view>

      <view class="choose-year">
        <u-button type="success" @click="preYear">上一年</u-button>
        <u-button type="success" @click="nextYear">下一年</u-button>
      </view>
    </view>
    <!--引用组件-->
    <u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF"
    ></u-skeleton>
  </view>
</template>

<script>
import wybTable from "@/plugins/wyb-table/wyb-table.vue";
export default {
  components: {
    wybTable,
  },
  data() {
    return {
      year: 2020,
      loading: true,
      headers: [
        {
          label: "项目(2020)",
          key: "name",
          width: 192,
        },
        {
          label: "1月",
          key: "one",
        },
        {
          label: "2月",
          key: "two",
        },
        {
          label: "3月",
          key: "three",
        },
        {
          label: "4月",
          key: "four",
        },
        {
          label: "5月",
          key: "five",
        },
        {
          label: "6月",
          key: "sex",
        },
        {
          label: "7月",
          key: "seven",
        },
        {
          label: "8月",
          key: "eight",
        },
        {
          label: "9月",
          key: "nine",
        },
        {
          label: "10月",
          key: "ten",
        },
        {
          label: "11月",
          key: "eleven",
        },
        {
          label: "12月",
          key: "twelve",
        },
      ],
      contents: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
      urlCol: [
        {
          type: "route",
          key: "url",
        },
        {
          type: "http",
          key: "link",
        },
      ],
    };
  },
  onLoad() {
    // 获取当前年份
    var date = new Date();
    this.year = date.getFullYear();
    this.init();
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.loading = true;
      this.headers[0].label = "项目(" + this.year + ")";
      this.getHisData().then((data) => {
        return this.detailData(data);
      });
    },
    /**
     * 获取历史数据  处理数据
     */
    getHisData() {
      return new Promise((resolve) => {
        var form = {
          baby_id: this.vuex_babyInfo.baby_id,
          year: this.year,
        };
        this.$u.api.hisDataApi(form).then((res) => {
          resolve(res.data);
        });
      });
    },
    /**
     * 处理数据
     */
    detailData(Data) {
      // console.log(Data.first_half);
      // console.log(Data.second_half);
      Data.first_half.map((v, index) => {
        Data.first_half[index].push(...Data.second_half[index]);
      });
      this.contents = [];
      Data.first_half.forEach((e, index) => {
        var from = {
          name: e[0].name + "(" + e[0].unit + ")",
        };
        // 对一年的数据进行处理
        e.map((v, index) => {
          if (index == 0) {
            from.one = v.value;
          } else if (index == 1) {
            from.two = v.value;
          } else if (index == 2) {
            from.three = v.value;
          } else if (index == 3) {
            from.four = v.value;
          } else if (index == 4) {
            from.five = v.value;
          } else if (index == 5) {
            from.sex = v.value;
          } else if (index == 6) {
            from.seven = v.value;
          } else if (index == 7) {
            from.eight = v.value;
          } else if (index == 8) {
            from.nine = v.value;
          } else if (index == 9) {
            from.ten = v.value;
          } else if (index == 10) {
            from.eleven = v.value;
          } else if (index == 11) {
            from.twelve = v.value;
          }
        });
        this.contents.push(from);
        this.loading = false;
      });
    },

    /**
     * 上一年
     */
    preYear() {
      this.contents = [];
      this.year = this.year - 1;
      this.init();
    },

    /**
     * 下一年
     */
    nextYear() {
      this.contents = [];
      this.year = this.year + 1;
      this.init();
    },
  },
};
</script>

<style scoped lang ='scss' >
.his-data {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 20rpx;
  .table-div {
    background-color: #ffffff;
    border-radius: 20rpx;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 40rpx 20rpx;
      & > view:nth-child(1) {
        color: #000000;
        font-size: 36rpx;
        font-weight: Bold;
        font-family: SourceHanSansCN-Bold;
      }
      & > view:nth-child(2) {
        font-size: 28rpx;
        color: #000000;
        font-weight: Regular;
      }
    }
    .choose-year {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 30rpx 0;
    }
  }
}
</style>
